import React from 'react'
import { Button, Checkbox, Form, Input } from 'antd'
import { RouteComponentProps } from 'react-router'

type P = {} & RouteComponentProps

type S = {
  userName: string
  password: string
  [k: string]: string
}

export default class Login extends React.Component<P, S> {
  constructor(props: P) {
    super(props)
    this.state = {
      userName: '',
      password: ''
    }
  }
  setInputValue = (e: React.ChangeEvent<HTMLInputElement>, type: string) => {
    if (!type) return
    this.setState({ [type]: e.target.value })
  }
  loginSubmit = (values: any) => {
    const { userName, password } = values
    if (!userName || !password) {
      console.log('账号或密码为空')
      return
    }
    localStorage.setItem('token', 'token-321321')
    // 路由跳转
    this.props.history.push('/')
  }
  render() {
    return (
      <div
        style={{
          width: '500px',
          margin: '0 auto',
          position: 'absolute',
          top: '36%',
          left: '50%',
          transform: 'translate(-50%)'
        }}
      >
        <Form
          name="basic"
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 16 }}
          initialValues={{ remember: true }}
          onFinish={this.loginSubmit}
          autoComplete="off"
        >
          <Form.Item
            label="用户名"
            name="userName"
            rules={[{ required: true, message: '请输入用户名!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="密码"
            name="password"
            rules={[{ required: true, message: '请输入密码!' }]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    )
  }
}
